<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link href='css/header.css' rel='stylesheet'/>
  <link href='css/row.css' rel='stylesheet'/>
  <link href='css/footer.css' rel='stylesheet'/>
	 <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
 <!-- ele 的引入放在vue下面-->
 <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
 <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
 <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<script src = 'plug-in/jquery-2.2.0.min.js' type='text/javascript'></script>
<!--<script src="/b-user/js/login.js"></script>-->
<script src="/js/index.js"></script>
	 <script src = 'js/global.js' type='text/javascript'></script>
	 <script src = 'js/popup.js' type='text/javascript'></script>
	 <script src = 'js/carousel.js' type='text/javascript'></script>
	 <script src = 'js/pagescroll.js' type='text/javascript'></script>
	 <script src = 'js/comment.js' type='text/javascript'></script>
  <title>哔哩哔哩弹幕视频网</title>
	 <script>

	 </script>
</head>
<body>
<div id="app">
	<!--头部区域-->
	<div class='bili-header'>
		<div class='navbar-mask'></div>
		<div class='navbar-wraper'>
			<div class='nav'>
				<ul class='nav-list'>
					<li class='icon-tv'><a href='#'>主站</a></li>
					<li><a href='#'>画友</a></li>
					<li id='nav-game'>
						<a href='#'>游戏中心</a>
						<div class='list-game pop' data-config='trigger:nav-game;delay:500;'>
							<div class='game-preview'>
								<div class='game-preview-top'></div>
								<ul class='game-preview-bottom'>
									<li class='first'>
										<img src="image/header/top/game/2.png" />
										<p>战舞幻想</p>
									</li>
									<li>
										<img src="image/header/top/game/3.png" />
										<p>刀剑神域</p>
									</li>
									<li>
										<img src="image/header/top/game/4.png" />
										<p>偶像梦幻</p>
									</li>
								</ul>
							</div>
							<div class='game-menu'>
								<img src="image/header/top/game/title.png">
								<a>游戏论坛</a>
								<ul>
									<li><a href='#'>少女前线</a></li>
									<li><a href='#'>苍之骑士团</a></li>
									<li><a href='#'>三国罗曼史</a></li>
									<li><a href='#'>命运-官位制定(Fate/Go)</a></li>
									<li><a href='#'>魔法少女园</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li id='nav-play'>
						<a href='#'>直播</a>
						<div class='list-play pop' data-config='trigger:nav-play;delay:500;'>
							<div class='play-preview'>
								<h4 class = 'preview-title'>热门直播</h4>
							</div>
							<div class ='play-activity'>
								<h4 class = 'preview-title'>热门直播</h4>
								<ul>
									<li>
										<a href = '#'>
											<img src="image/header/top/live/8.jpg"/>
										</a>
									</li>
									<li>
										<a href = '#'>
											<img src="image/header/top/live/7.jpg"/>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href='#'>周边</a>
					</li>
					<li class='icon-new' ><a href='#'>BML</a></li>
				</ul>
				<bilibili @myinfo="a"></bilibili>
			</div>
		</div>
		<div class='search-wraper clearfix'>
			<ul>
				<li class='rank'><span class='icon-rank'></span><a href='#'>排行榜</a></li>
				<li class='search'>
					<form @submit.prevent="searchByText">
						<input type='text' v-model="searchText" placeholder = '极限公益晚会，没有不可能'>
						<button class='icon-ext' type="submit"></button>
					</form>
				</li>
			</ul>
		</div>
	</div>
	<!--主体区域-->
	<div class='bili-bd' >
		<!--导航区域-->
		<div class='bili-bd-nav'>
			<ul class='nav-menu'>
				<li>
					<a href='#'>
						<span class='first ve-num'></span>
						<em>首页</em>
					</a>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>127</span>
						<em>动画</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>MAD.AMV</p></a></li>
						<li><a href='#'><p><span>&gt</span>MAD.3D</p></a></li>
						<li><a href='#'><p><span>&gt</span>短片.手书.配音</p></a></li>
						<li><a href='#'><p><span>&gt</span>综合</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>29</span>
						<em>番剧</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>连载动画</p></a></li>
						<li><a href='#'><p><span>&gt</span>完结动画</p></a></li>
						<li><a href='#'><p><span>&gt</span>资讯</p></a></li>
						<li><a href='#'><p><span>&gt</span>官方延伸</p></a></li>
						<li><a href='#'><p><span>&gt</span>国产动画</p></a></li>
						<li><a href='#'><p><span>&gt</span>新番Index</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>218</span>
						<em>音乐</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>翻唱</p></a></li>
						<li><a href='#'><p><span>&gt</span>Vocaloid.Utau</p></a></li>
						<li><a href='#'><p><span>&gt</span>演奏</p></a></li>
						<li><a href='#'><p><span>&gt</span>三次元音乐</p></a></li>
						<li><a href='#'><p><span>&gt</span>同人音乐</p></a></li>
						<li><a href='#'><p><span>&gt</span>OP/ED/OST</p></a></li>
						<li><a href='#'><p><span>&gt</span>音乐选集</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>24</span>
						<em>舞蹈</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>宅舞</p></a></li>
						<li><a href='#'><p><span>&gt</span>三次元舞蹈</p></a></li>
						<li><a href='#'><p><span>&gt</span>舞蹈教程</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>736</span>
						<em>游戏</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>单机联机</p></a></li>
						<li><a href='#'><p><span>&gt</span>网游电竞</p></a></li>
						<li><a href='#'><p><span>&gt</span>音游</p></a></li>
						<li><a href='#'><p><span>&gt</span>Mugen</p></a></li>
						<li><a href='#'><p><span>&gt</span>GMV</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>102</span>
						<em>科技</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>记录片</p></a></li>
						<li><a href='#'><p><span>&gt</span>趣味科普人文</p></a></li>
						<li><a href='#'><p><span>&gt</span>野生技术协会</p></a></li>
						<li><a href='#'><p><span>&gt</span>演讲公开课</p></a></li>
						<li><a href='#'><p><span>&gt</span>星海</p></a></li>
						<li><a href='#'><p><span>&gt</span>数码</p></a></li>
						<li><a href='#'><p><span>&gt</span>机械</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>189</span>
						<em>生活</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>搞笑</p></a></li>
						<li><a href='#'><p><span>&gt</span>日常</p></a></li>
						<li><a href='#'><p><span>&gt</span>美食圈</p></a></li>
						<li><a href='#'><p><span>&gt</span>动物圈</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>27</span>
						<em>鬼畜</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>鬼畜调教</p></a></li>
						<li><a href='#'><p><span>&gt</span>音MAD</p></a></li>
						<li><a href='#'><p><span>&gt</span>人力VOCALOID</p></a></li>
						<li><a href='#'><p><span>&gt</span>教程演示</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>29</span>
						<em>时尚</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>美妆健身</p></a></li>
						<li><a href='#'><p><span>&gt</span>服饰</p></a></li>
						<li><a href='#'><p><span>&gt</span>资讯</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>266</span>
						<em>娱乐</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>综艺</p></a></li>
						<li><a href='#'><p><span>&gt</span>明星</p></a></li>
						<li><a href='#'><p><span>&gt</span>Janpan相关</p></a></li>
					</ul>
				</li>
				<li>
					<a href='#'>
						<span class='ve-num'>145</span>
						<em>影视</em>
					</a>
					<ul class='menu-list pop'>
						<li><a href='#'><p><span>&gt</span>电影</p></a></li>
						<li><a href='#'><p><span>&gt</span>电视剧</p></a></li>
					</ul>
				</li>
			</ul>
			<div class='side-bar'>
				<div class='pub'>
					<a href='#'>
						广场
					</a>
				</div>
				<div class='play'>
					<a href='#'>
						直播
					</a>
				</div>
				<div class='show'>
					<img src ='image/header/phone/1.gif'/>
				</div>
				<div class='phone'>
					<img class='pop' data-config='effect:fadeIn;time:800;' src='image/header/phone/4.png'/>
				</div>
			</div>
		</div>
		<!--轮播区域-->
		<div class='bili-bd-previewer clearfix'>
			<div class='bili-bd-banner carousel' data-config='delay:500;time:4000;'>
				<ul class='banner-container container'>
					<li style='background:url(image/banner/left/4.jpg)'></li>
					<li style='background:url(image/banner/left/5.jpg)'></li>
					<li style='background:url(image/banner/left/2.png)'></li>
					<li style='background:url(image/banner/left/3.jpg)'></li>
					<li style='background:url(image/banner/left/1.jpg)'></li>
				</ul>
				<ul class='banner-tab tab'>
					<li class='active'></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class='bili-bd-column carousel' data-config='delay:0;autoplay:false;prev:.prev;next:.next;'>
				<ul class='column-list container'>
					<li>
						<ul class='list-wrap'>
							<li class='top' style='background-image:url(image/banner/right/1/1.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>[言和小说]Kill Me Eyes</span>
									<span class='author'>主播:塞亚</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/1/2.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>心跳扑通扑通说喜欢</span>
									<span class='author'>主播:高压锅</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/1/3.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>见过这样的男人?</span>
									<span class='author'>主播:萌一点嘛</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/1/7.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>万国动向</span>
									<span class='author'>主播:萌萌牛</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/4.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>三国杀[停不下来]</span>
									<span class='author'>主播:斗战猴子</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/5.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>MiniLee周秀</span>
									<span class='author'>主播:哎呀呀</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/6.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>Guige芸</span>
									<span class='author'>主播:bobo</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/1/8.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>守望先锋</span>
									<span class='author'>主播:Magic</span>
								</a>
							</li>
						</ul>
					</li>
					<li>
						<ul class='list-wrap'>
							<li class='top' style='background-image:url(image/banner/right/2/1.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>[言和小说]Kill Me Eyes</span>
									<span class='author'>主播:塞亚</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/2/2.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>心跳扑通扑通说喜欢</span>
									<span class='author'>主播:高压锅</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/2/3.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>见过这样的男人?</span>
									<span class='author'>主播:萌一点嘛</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/2/7.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>万国动向</span>
									<span class='author'>主播:萌萌牛</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/4.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>三国杀[停不下来]</span>
									<span class='author'>主播:斗战猴子</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/5.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>全新[魔法格]</span>
									<span class='author'>主播:哎呀呀</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/6.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>吉他手的一天</span>
									<span class='author'>主播:bobo</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/2/8.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>塑业先锋</span>
									<span class='author'>主播:Magic</span>
								</a>
							</li>
						</ul>
					</li>
					<li>
						<ul class='list-wrap'>
							<li class='top' style='background-image:url(image/banner/right/3/1.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>[言和小说]Kill Me Eyes</span>
									<span class='author'>主播:塞亚</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/3/2.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>心跳扑通扑通说喜欢</span>
									<span class='author'>主播:高压锅</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/3/3.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>见过这样的男人?</span>
									<span class='author'>主播:萌一点嘛</span>
								</a>
							</li>
							<li class='top' style='background-image:url(image/banner/right/3/7.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>万国动向</span>
									<span class='author'>主播:萌萌牛</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/4.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>三国杀[停不下来]</span>
									<span class='author'>主播:斗战猴子</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/5.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>全新[魔法格]</span>
									<span class='author'>主播:哎呀呀</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/6.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>吉他手的一天</span>
									<span class='author'>主播:bobo</span>
								</a>
							</li>
							<li class='bottom' style='background-image:url(image/banner/right/3/8.jpg)'>
								<a href='#' class='pop' data-config='effect:slideDown;time:250;'>
									<span class='title'>塑业先锋</span>
									<span class='author'>主播:Magic</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<div class='btn prev'><span>昨日</span></div>
				<div class='btn next'><span>一周</span></div>
			</div>
		</div>
		<!--推广区-->
		<div class='bili-bd-promote clearfix'>
			<div class='promote-lt'>
				<div class='lt-header'>
					<h2 class='header-title'>
						推广
					</h2>
					<ul class='header-list'>
						<li><a href='#'>一大波角虫接近中(๑•̀ㅂ•́)و✧</a></li>
						<li><a href='#'>我的梦想是有一个女票</a></li>
						<li class='last'><a href='#'>可以！这很流星群 (｡•̀◡-)✧</a></li>
					</ul>
				</div>
				<div class='lt-container'>

					<ul class='container-list' ref="content">
						<li class='first' style="margin-left: 30px" v-for="v in recvideo" style="margin: 10px">
							<img class='list-pic' :src="v.image" @click="location.href = 'video.html?id=' + v.id">

							<div style=" display: flex; flex-direction: column">
								<p>{{v.vname}}</p>
								<p style="color:#9499A0;font-size:12px;margin:8px 0">{{v.name}}   1小时前</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			myinfo:{},
			scrollTop:0,
			recvideo: [], // 相关视频
			searchText: "", //搜索词
			page: 1,
			counts: 12,
			isAtBottom: false, // 标记是否滚动到了底部
		},
		created() {
			this.recVideo();
			// 检测滚动条


		},
		methods : {
			recVideo(){
				axios.get("video/recVideo", {
					params:{
						page: this.page,
						count: this.counts
					}
				}).then(res=>this.recvideo = res.data)
			},
			a(myinfo){
				this.myinfo = myinfo;
			},
			searchByText(){
				location.href = 'search.html?searchText=' + this.searchText;
			},
			checkScrollPosition() {
				// 检查是否滚动到了窗口底部
				const bottomOfWindow =
						Math.ceil(window.innerHeight + window.scrollY) >=
						document.documentElement.scrollHeight;

				if (bottomOfWindow) {
					this.isAtBottom = true;
					// 在这里调用其他Vue方法或执行其他逻辑
					this.page += 1
					axios.get("video/recVideo", {
						params:{
							page: this.page,
							count: this.counts
						}
					}).then(res=> {
						const objectArray = Object.values(res.data);
						// 合并 分页的数据
						const mergedArray = [...this.recvideo, ...objectArray]
						this.recvideo = mergedArray;
					})

					// this.handleScrollToBottom();
				} else {
					this.isAtBottom = false;
				}
			},
		},
		mounted() {
			window.addEventListener('scroll', this.checkScrollPosition);

		// 	// 组件挂载后添加滚动事件监听器
		// 	window.addEventListener('scroll', this.handleScroll);
		// },
		// beforeDestroy() {
		// 	// 组件销毁前移除滚动事件监听器
		// 	window.removeEventListener('scroll', this.handleScroll);
		}
	})
</script>

<script>
//   var a = 0;
// $(window).on('scroll',function(){
//   var b = $(this).scrollTop(),
//     c = b - a;
//     console.log(c);
//     a = b;
// });
  document.addEventListener("DOMContentLoaded", function () {
	  const bannerContainer = document.querySelector(".banner-container");
	  const bannerItems = document.querySelectorAll(".banner-container li");
	  const tabItems = document.querySelectorAll(".banner-tab li");
	  const totalSlides = bannerItems.length;

	  let currentIndex = 0; // 当前显示的图片索引
	  let autoPlayInterval; // 自动播放的定时器

	  // 初始化样式
	  bannerContainer.style.transition = "transform 0.6s cubic-bezier(0.42, 0, 0.58, 1)"; // 优化动画效果
	  bannerContainer.style.display = "flex"; // 确保子元素横向排列
	  bannerContainer.style.width = `${totalSlides * 100}%`; // 容器宽度
	  bannerItems.forEach((item) => {
		  item.style.flex = "0 0 100%"; // 每个图片占满容器宽度
	  });

	  // 切换到指定索引的图片
	  function goToSlide(index) {
		  currentIndex = (index + totalSlides) % totalSlides; // 确保索引不越界
		  bannerContainer.style.transform = `translate3d(-${currentIndex * 100}%, 0, 0)`; // 使用 translate3d 触发硬件加速
		  updateTabs(); // 更新下方指示器的状态
	  }

	  // 更新下方指示器的状态
	  function updateTabs() {
		  tabItems.forEach((tab, idx) => {
			  tab.classList.toggle("active", idx === currentIndex); // 当前索引对应的 tab 添加 active 类
		  });
	  }

	  // 自动播放功能
	  function startAutoPlay() {
		  autoPlayInterval = setInterval(() => {
			  goToSlide(currentIndex + 1); // 每隔 2 秒切换到下一张
		  }, 2000);
	  }

	  // 停止自动播放功能
	  function stopAutoPlay() {
		  clearInterval(autoPlayInterval);
	  }

	  // 给每个 tab 添加点击事件
	  tabItems.forEach((tab, index) => {
		  tab.addEventListener("click", () => {
			  stopAutoPlay(); // 点击时停止自动播放
			  goToSlide(index); // 切换到对应图片
			  startAutoPlay(); // 重新启动自动播放
		  });
	  });

	  // 启动自动播放
	  startAutoPlay();
  });
  </script>
</body>
</html>
